Cascading Style Sheets(CSS) 用來指定HTML document視覺呈現方式的標準。
style規則來至不同來源所一層層相疊後的結果(後面執行的會覆蓋掉之前的樣式)。

• Web browser預設樣式
• 文件樣式表(style sheet)
• HTML元素的style屬性

非標準特性

實做非標準特性時，需添加的前綴(供應商專屬字串)

• Firefox: -moz-
• chorme: -webkit-
• IE: -ms-

.bdr10{
border-radius: 10px;
-moz-border-radius: 10px; // for firefox 3.x
-webkit-border-radius: 10px; // for safari 3.2 / 4
}

CSS position特性

為元素定位

static - Defaule

元素依據正常的document內容順序排列(右上至下，由左至右)，在static特性下，無法使用top / left ..來調整位置。

absolute

以某個父元素(非static)當作基準做絕對定位。
下面的levla-3絕對定位會以leval-1當基準(因為leval-2預設為static)

• html

<div class="leval-1">
    <div class="leval-2">
        <div class="leval-3">
        </div>
    </div>
</div>

• css

.leval-1{
    position: relative;
}

.leval-3{
    position: absolute;
    top: 50%;
    left: 50px;
}

fixed

以瀏覽器是窗的位置來指定元素位置，以fixed來定位永遠都看得見，不會因為滾動而不見。(類似網頁的蓋板廣告)

relative

元素會以原本應該在的位置當基準做定位。

只要不要設為position: static，就能以left、top、right、bottom來定位

z-index

第三維度的定位(z軸)，數字越大越上面，僅能套用在兄弟節點。

bos-sizing: border-box

標準CSS在設定width/height不包含border和padding。
在CSS3，有box-sizing屬性預設為content-tyoe(特性就如上面的標準CSS設定的width/height)，當box-sizing設為border-box將會把border和padding含在wedth/height。

另外也可以使用calc()來計算尺寸達到需要的大小。

visibility / display

當visibility: hidden或display: none 元素都不會顯示出來。
但之間最大的差異:

• visibility: hidden: 元素不顯示出來，但在document還是存在此元素的空間。
• display: none: 元素不顯示出來，且document不會留元素的空間。

當使用posititon: absolute或posititon: fixed ，visibility: hidden、display: none 兩者效果一樣，通常會優先選用visibility: hidden。